<template>
  <div class="Apply-box">
    <div class="header">
      <div class="tab">
        <div class="tab_left">
          <el-icon><Search /></el-icon>
          筛选搜索
        </div>
        <div class="tab_right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="searchHandle">查询结果</el-button>
        </div>
      </div>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        ref="ruleFormRef"
      >
        <el-form-item label="输入搜索:" prop="id">
          <el-input v-model="form.id" placeholder="服务单号" />
        </el-form-item>
        <el-form-item label="处理状态:" prop="status">
          <el-select v-model="form.status" placeholder="全部">
            <el-option
              v-for="(item, index) in ProcessingStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间:" prop="createTime">
          <el-col :span="22">
            <el-date-picker
              v-model="form.createTime"
              type="date"
              placeholder="请选择时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="操作人员:" prop="handleMan">
          <el-input placeholder="全部" v-model="form.handleMan"></el-input>
        </el-form-item>
        <el-form-item label="处理时间:" prop="handleTime">
          <el-col :span="22">
            <el-date-picker
              v-model="form.handleTime"
              type="date"
              placeholder="请选择时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加 -->
    <div class="list">
      <div class="list_left">
        <el-icon><Tickets /></el-icon>
        数据列表
      </div>
      <div class="list_right">
        <el-button>添加</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
      border
      table-layout="auto"
      cell-class-name="align-c"
      ref="multipleTableRef"
      @select="handleSelectionChange"
      @select-all="handleSelectionAll"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        v-model="check"
      />
      <el-table-column prop="id" label="服务单号" width="100" align="center" />
      <el-table-column
        prop="createTime"
        label="申请时间"
        width="200"
        align="center"
      >
        <template #default="{ row }">
          <span>{{ formateDate(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memberUsername" label="用户账号" align="center" />
      <el-table-column prop="productRealPrice" label="退款金额" align="center">
        <template #default="{ row }">
          {{ addMoney(row.productRealPrice) }}
        </template>
      </el-table-column>
      <el-table-column
        label="申请状态"
        width="100"
        prop="status"
        align="center"
      >
        <template #default="{ row }">
          {{ formateStatus(row.status) }}
        </template>
      </el-table-column>
      <el-table-column
        label="处理时间"
        width="200"
        prop="handleTime"
        align="center"
      >
        <template #default="{ row }">
          <span>{{ formateDate(row.handleTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button @click="router.push('returnApplyDetail?id=' + row.id)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="left">
        <el-select v-model="type">
          <el-option label="批量删除" :value="0" />
        </el-select>

        <el-button type="primary" @click="determine">确定</el-button>
      </div>
      <ElConfigProvider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageChangeHandle"
          @current-change="pageSizeChangeHandle"
        />
      </ElConfigProvider>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import useTable from "@/hooks/useTable";
import { ApiReturnApply, ApiReturnApplyAll, ApiApplyDelete } from "./api";
import { formateDate, formateStatus, addMoney } from "@/utils/index";
import type { FormInstance } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
// 搜索
const form = reactive<IReturnApplyParams>({
  id: null,
  createTime: null,
  handleTime: null,
  status: null,
  handleMan: null,
});
const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
  fetch,
} = useTable(ApiReturnApply, form);

const type = ref<0>(0);
const cage = ref<number[]>([]);
const CategoryList = ref<[]>();
const selectValue = ref("");
// select
const ProcessingStatus = ref([
  { label: "待处理", value: "1" },
  { label: "退货中", value: "2" },
  { label: "已完成", value: "3" },
  { label: "已拒绝", value: "4" },
]);
// 重置
const reset = () => {
  ruleFormRef.value?.resetFields();
  fetch();
};
// 多选框
const check = ref<number[]>([]);
//
const changeOptions = () => {};
// 单选
const handleSelectionChange = (val: any[]) => {
  check.value = val.reduce((pre: number[], next: { id: number }) => {
    return pre.concat(next.id);
  }, []);
  console.log(check.value);
};
// 全选
const handleSelectionAll = (val: any[]) => {
  check.value = val.reduce((pre: number[], next: { id: number }) => {
    return pre.concat(next.id);
  }, []);
  console.log(check.value);
};
// 确定按钮
const determine = () => {
  if (check.value.length !== 0) {
    if (type.value == 0) {
      ElMessageBox.confirm("是否要进行删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ApiApplyDelete(check.value).then((res) => {
            ElMessage.success("删除成功");
            fetch();
          });
        })
        .catch((res) => {
          console.log(res);
        });
    }
  } else {
    ElMessage.warning("请选择要操作的申请");
  }
};
</script>
<style lang="less" scoped>
.Apply-box {
  .header {
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03),
      0px 0px 80px rgba(0, 0, 0, 0.06);
    .tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .el-form {
      display: grid;
      grid-template-columns: repeat(3, 33%);
      margin-left: 100px;
      .el-input {
        width: 215px;
      }
    }
  }
  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03),
      0px 0px 80px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    padding: 20px;
  }
  :deep(.align-c) {
    .cell {
      text-align: center;
    }
  }
  .pagination {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    .left {
      :deep(.el-button) {
        margin-left: 20px;
      }
    }
  }
}
</style>
